<template>
	<view>
		<view class="top-container">
			<view class="status_bar"></view>
			<view class="top" @click="toUserInfo">
				<image class="avatar" :src="user.headPicUrl"></image>
				<view class="content">
					<text class="nick">{{user.nick}}</text>
					<view class="code">
						<text class="userCode">ID:{{user.userCode}}</text>
						<text class="copy">复制</text>
					</view>
				</view>
				<image :src="getImageUrl('ic_arrow_right_white_title.png')" style="width: 30rpx;" mode="widthFix">
				</image>
			</view>

			<view class="follow-container">
				<view class="item">
					<view class="num">0</view>
					<view class="text">关注</view>
				</view>
				<view class="item">
					<view class="num">0</view>
					<view class="text">粉丝</view>
				</view>
				<view class="item">
					<view class="num">0</view>
					<view class="text">访问</view>
				</view>
			</view>

			<view class="vip" v-if="!online">
				<image :src="getImageUrl('ic_mine_vip.png')" style="width: 40rpx; height: 40rpx;"></image>
				<view class="text">{{vip.text}}</view>
				<view class="btn" @click="toVip">{{vip.btn}}</view>
			</view>

			<image class="top-bg" :src="getImageUrl('mine_top_bg.png')" mode="widthFix"></image>
		</view>

		<view class="day-container">
			<view class="item">
				<image class="icon" :src="getImageUrl('mine_day_1.png')"></image>
				<view class="text">每日奖励</view>
			</view>
			<view class="item">
				<image class="icon" :src="getImageUrl('mine_day_2.png')"></image>
				<view class="text">邀请有奖</view>
			</view>
			<view class="item">
				<image class="icon" :src="getImageUrl('mine_day_3.png')"></image>
				<view class="text">账户充值</view>
			</view>
			<view class="item">
				<image class="icon" :src="getImageUrl('mine_day_4.png')"></image>
				<view class="text">我的奖励</view>
			</view>
		</view>

		<view class="sign-container">
			<view class="top">
				<view class="label">钻石签到</view>
				<view class="btn actived">去签到</view>
			</view>
			<scroll-view :scroll-x='true'>
				<view class="list">
					<view class="item actived">
						<view class="day actived">第一天</view>
						<image class="diamond" :src="getImageUrl('mine_sign_diamond.png')"></image>
						<view class="num actived">x5</view>
					</view>
					<view class="item actived">
						<view class="day actived">第二天</view>
						<image class="diamond" :src="getImageUrl('mine_sign_diamond.png')"></image>
						<view class="num actived">x10</view>
					</view>
					<view class="item">
						<view class="day">第三天</view>
						<image class="diamond" :src="getImageUrl('mine_sign_diamond.png')"></image>
						<view class="num">x10</view>
					</view>
					<view class="item">
						<view class="day">第四天</view>
						<image class="diamond" :src="getImageUrl('mine_sign_diamond.png')"></image>
						<view class="num">x10</view>
					</view>
					<view class="item">
						<view class="day">第五天</view>
						<image class="diamond" :src="getImageUrl('mine_sign_diamond.png')"></image>
						<view class="num">x10</view>
					</view>
					<view class="item">
						<view class="day">第六天</view>
						<image class="diamond" :src="getImageUrl('mine_sign_diamond.png')"></image>
						<view class="num">x10</view>
					</view>
					<view class="item">
						<view class="day">第七天</view>
						<image class="diamond" :src="getImageUrl('mine_sign_diamond.png')"></image>
						<view class="num">x10</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="cell-container">
			<cell-item label="实名认证" :icon="getImageUrl('ic_mine_realname.png')" @click.native="toRealName"></cell-item>
			<cell-item label="在线客服" :icon="getImageUrl('ic_mine_customer_service.png')"
				@click.native="onService"></cell-item>
			<cell-item label="设置" :icon="getImageUrl('ic_mine_set.png')" @click.native="toSetting"></cell-item>
		</view>


	</view>
</template>


<script>
import RouteUtil from '../../../main/common/RouteUtil';
	export default {
		data() {
			return {
				online: uni.$constant.online,
				user: {},
				vip: {
					text: '加入vip，立享专属特权',
					btn: '立即开通'
				}
			}
		},
		onShow() {
			this.requestUser();
		},
		methods: {
			toUserInfo() {
				RouteUtil.toUserInfo(this.user.txCode)
			},
			toVip() {
				RouteUtil.toVip()
			},
			toRealName() {
				RouteUtil.toRealname()
			},
			onService() {
				uni.showModal({
					title: '客服',
					content: `客服QQ：2778027813 工作时间9：00-18：00`
				})
			},
			toSetting() {
				RouteUtil.toSetting()
			},


			//以下为接口
			requestUser() {
				uni.$http.getUser().then(res => {
					this.user = res.data;
					if (0 == res.data.vip) {
						this.vip.text = '已开通VIP ' + res.data.vipTime + '到期';
						this.vip.btn = '立即续费';
					} else {
						this.vip.text = '开通VIP|享文字免费畅聊';
						this.vip.btn = '立即开通';
					}
				})
			},
		}
	}
</script>



<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.top {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx;

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		.content {
			display: flex;
			flex-direction: column;
			flex: 1;
			margin-left: 20rpx;

			.nick {
				font-size: 36rpx;
				color: #f3f3f3;
				font-weight: bold;
			}

			.code {
				display: flex;
				flex-direction: row;
				align-items: center;

				.userCode {
					font-size: 24rpx;
					color: #f3f3f3;
					margin-top: 5rpx;
				}

				.copy {
					font-size: 20rpx;
					color: #f3f3f3;
					border: 1px solid #b68dff;
					border-radius: 10rpx;
					padding: 5rpx 15rpx;
					margin-left: 15rpx;
				}
			}

		}
	}

	.follow-container {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		margin-top: 20rpx;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.num {
				color: #f3f3f3;
				font-size: 40rpx;
				font-weight: 500;
			}

			.text {
				color: #f3f3f3;
				font-size: 28rpx;
				margin-top: 10rpx;
			}
		}
	}

	.vip {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100rpx;
		margin: 50rpx 30rpx;
		box-sizing: border-box;
		border-radius: 15rpx;
		background-image: linear-gradient(to right, #5A5B7F, #35385B);
		padding: 0 15rpx;
		font-size: 24rpx;
		color: #feeac9;

		.text {
			flex: 1;
			margin: 0 15rpx;
		}

		.btn {
			font-size: 26rpx;
			color: #302f37;
			margin: auto 15rpx;
			padding: 10rpx 20rpx;
			background: linear-gradient(to right, #feeac9, #f1af63);
			border-radius: 50rpx;
		}
	}

	.top-container {
		position: relative;
		background: linear-gradient(to right, #7653f5, #a348fd);

		.top-bg {
			width: 100%;
			position: absolute;
			bottom: -20rpx;
		}
	}

	.day-container {
		margin: 0 30rpx;
		background-color: #fff;
		border-radius: 15rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		padding: 30rpx 0;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.icon {
				width: 80rpx;
				height: 80rpx;
			}

			.text {
				font-size: 28rpx;
				color: #3b3b3b;
				margin-top: 20rpx;
			}
		}
	}

	.sign-container {
		margin: 0 30rpx;
		background-color: #fff;
		border-radius: 15rpx;
		margin-top: 30rpx;

		.top {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.label {
				font-size: 30rpx;
				color: #222;
			}

			.btn {
				font-size: 24rpx;
				color: #fff;
				background-color: #ff7506;
				border-radius: 50rpx;
				padding: 12rpx 25rpx;
			}

			.btn.actived {
				color: #868686;
				background-color: #f0f0f0;
			}
		}

		.list {
			display: flex;
			flex-direction: row;
			padding: 0 10rpx;
			margin-bottom: 20rpx;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 80rpx;
				padding: 10rpx;
				background-color: #fff0e0;
				border-radius: 10rpx;
				margin-right: 10rpx;

				.day {
					font-size: 20rpx;
					color: #f27428;
				}

				.diamond {
					width: 30rpx;
					height: 30rpx;
					margin: 20rpx 0;
				}

				.num {
					font-size: 22rpx;
					color: #f27428;
				}

				.actived {
					color: #868686;
				}
			}

			.item.actived {
				background-color: #f0f0f0;
			}
		}
	}

	.cell-container {
		margin: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 0 5rpx;
	}
</style>